[JavaScript] 非同步事件處理

前言

許久沒更新網誌了,開始上班剛好是個好時機重新經營。

最近又遇到非同步事件的問題,雖然寫過但一遇到還是卡住,因此紀錄一下做法。

問題

假設我們現在有三個事件要進行並取得結果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var tasks = [task1, task2, task3];
function task1(callback) {
setTimeout(function(){
console.log('task 1 done');
callback(1);
}, 500);
}
function task2(callback) {
setTimeout(function(){
console.log('task 2 done');
callback(2);
}, 400);
}
function task3(callback) {
setTimeout(function(){
console.log('task 3 done');
callback(3);
}, 300);
}
var obj = {} ;
function getResult(result){
obj.result = result ;
}

依序執行

利用遞迴以及紀錄次數

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function sequential(tasks,callback) {
var index = 0 ;
var resultList = [] ;
(function next(){
if ( index < tasks.length ){
tasks[index++](function(el){
resultList.push(el);
next(tasks);
});
} else {
callback(resultList);
}
})();
}
sequential(tasks,getResult);

同時進行

紀錄事件狀態及紀錄完成次數

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function parallel(tasks , callback) {
var resultList = [] , resultCount = 0 ;
resultList.length = tasks.length ;
for ( let i = 0 ; i < tasks.length ; i ++ ){
tasks[i](function(el){
resultList[i] = el ;
resultCount ++ ;
if ( resultCount >= tasks.length ){
callback(resultList) ;
}
});
}
}
parallel(tasks,getResult);